<template>
    <el-row :gutter="20" class="header-row">
        <el-col :span="4" class="logo">
            <nuxt-link to="/">
                <el-image
                    style="width: 50px; "
                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill">
                </el-image>
            </nuxt-link>
        </el-col>
        <el-col :span="20">
            <el-row class="menu-bar">
                <nuxt-link 
                    v-for="(item, index) in menus" :key="index" active-class="current" class="menu-link" exact :class="activeIndex === item.path ?'current':''"   :to="item.path">
                        <i :class="'iconfont icon-' + item.icon"></i>
                        <span>{{item.title}}</span>
                </nuxt-link>
            </el-row>
        </el-col>
    </el-row>
</template>
<script>
export default {
    name: 'TopNavBar',
    data() {
        return {
            menus: [
                { title: '首页', path: '/', icon: 'home' },
                { title: '标签', path: '/tags', icon: 'tags' },
                { title: '分类', path: '/category', icon: 'category' },
                { title: '归档', path: '/archives', icon: 'archive' },
                { title: '留言板', path: '/message', icon: 'comment' },
                { title: '友链', path: '/link', icon: 'link' },
                { title: '关于', path: '/about', icon: 'user' },
            ],
            activeIndex: ''
        }
    },
    watch: {
        // 监听路由变化
        '$route': {
            handler(routePath) {
                this.handleSelect(routePath)
            }
        }
    },
    mounted(){
        this.activeIndex = this.$route.path;
    },
    methods: {
        handleSelect(key, keyPath) {
            // console.log(key, keyPath)

            const tmp = key.path.split('/').filter((s) => { return s && s.trim(); });
            // console.log(tmp)

            this.activeIndex = '/' + tmp[0]
            // console.log(this.activeIndex)
        }
    }
}
</script>
<style lang="less" scoped>
.header-row {
    width: 70%;
    display: inline-block;

    .logo {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-image{
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                vertical-align: middle;
            }
        }
    }

    .menu-bar {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;

        a {
            display: inline-block;
            width: 100%;
        }

        .menu-link {
            display: block;
            position: relative;
            padding: 0 20px;
            font-size: 16px;
            cursor: pointer;
            transition: color 0.25s ease;

            &:after {
                content: '';
                position: absolute;
                bottom: 0px;
                left: 50%;
                height: 2px;
                width: 0;
                border-radius: 2px;
                background-image: linear-gradient(90deg, #2db7f5, #6bc30d);
                transition: all 0.3s ease;
            }

            &:hover {
                color: #6bc30d;
                background:linear-gradient(90deg, #2db7f5, #6bc30d);
                -webkit-background-clip: text;
                color: transparent;

                &:after {
                    width: 100%;
                    left: 0;
                }
            }

            &.current {
                color: #6bc30d;
                font-weight: 600;
                background: linear-gradient(90deg, #2db7f5, #6bc30d);
                -webkit-background-clip: text;
                color: transparent;

                &:after {
                    width: 100%;
                    left: 0;
                }
            }
        }
    }
}
</style>